<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=yes">
  
  
  <title>  Nginx解决vue项目在生产环境的跨域问题 |   写夜子的个人博客 </title>

 
  
    <link rel="icon" href="/images/favicon.png">
  


  <link rel="stylesheet" href="/nayo.min.css"> 
</head>  
  <body>   
    
      <header class="header">
	
  <nav class="header-nav">        
   
    <span class="iconfont icon-menu mobile-toggle"></span>   	

    <div class="header-menu">          
              
            
              <a class="header-menu-link" id="header-menu-home" href="/">首页</a>     
            
            
            
              <a class="header-menu-link" id="header-menu-archives" href="/archives">归档</a>     
            
            
            
              <a class="header-menu-link" id="header-menu-tags" href="/tags">标签</a>     
            
            
            
              <a class="header-menu-link" id="header-menu-about" href="/about">关于</a>     
            
            
            
              <a class="iconfont icon-menu-search header-menu-link" id="header-menu-search"></a>
            
                
    </div>  
    
  </nav>
</header>   

      <div class="container">       
          
          
            <section class="main">  
          

          <article class="post">
  
	<div class="post-header">

	<p class="post-title">	
		nginx解决vue项目在生产环境的跨域问题
	</p>
			

	<div class="meta-info">	
	<span>
		11月 06, 2018
	</span>

	
	
		<i class="iconfont icon-words"></i>
		<span>
			1956
		</span>
	
</div>

</div> 
	 

	  <div class="post-content slideDownMin">

		

			
					<h3 id="问题由来"><a href="#问题由来" class="headerlink" title="问题由来"></a>问题由来</h3><p>   我最近做项目,我在前端使用了vue开发,使用vue-cli3搭建项目,在开发的过程中,在开发环境中遇到了跨域的问题,我在vue.config.js配置了proxy,然后解决了问题.但是项目总归要上线,我运行了<code>npm run build</code>之后生成了dist文件夹.由于我的服务器容器是tomcat,所以刚开始我在tomcat的webapps文件夹下面新建了一个项目名vuemusic,然后将dist文件夹下面的所有东西拷贝至webapps下面,然后去conf文件夹配置了server.xml,然后我很开心的打开浏览器,输入地址<code>www.xieyezi.com/vuemusic</code>进行访问,这个时候出现一个问题,请求不到后端数据.<br>   <a id="more"></a></p>
<h3 id="问题的分析"><a href="#问题的分析" class="headerlink" title="问题的分析"></a>问题的分析</h3><p>   我认真的想了一下,这个项目是前后端分离的项目,我将前端代码放置在tomcat的webapps下面,我的tomcat配置的是80端口,但是我的后端服务采用的是node.js,然后走的是3000端口,但是去访问网站的时候会默认访问同源位置,所以出现了端口跨域的问题.</p>
<h3 id="解决的思路"><a href="#解决的思路" class="headerlink" title="解决的思路"></a>解决的思路</h3><p>   找到了问题,那我们就可以思考一下怎么去解决问题.<br>   有两种解决思路:</p>
<ul>
<li>一是在后端服务模块设置允许跨域,但是我对node.js不是特别熟悉,所以放弃了这个方法.</li>
<li>二是找到一个可以实现跨域的代理方法.我在网上搜索,大家都推荐使用nginx去实现生产环境跨域问题.      </li>
</ul>
<h3 id="解决方法"><a href="#解决方法" class="headerlink" title="解决方法"></a>解决方法</h3><p>  所以就使用nginx来解决跨域问题.<br>  去[nginx官网]下载安装好nginx.<br>  到ngix根目录点击nginx.exe启动ngix服务器.<br>  然后将刚刚在webapps文件夹下新建的vumusic文件夹拷贝至nginx目录下的html目录下(如图):</p>
<p>  <img src="https://i.loli.net/2018/11/06/5be168751fc06.png" alt="QQ20181106-180932@2x.png"></p>
<p>  打开conf文件夹下面的nginx.conf进行编辑:<br>     <figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br></pre></td><td class="code"><pre><span class="line"># 设置vue项目</span><br><span class="line"> server &#123;</span><br><span class="line">     listen  <span class="number">8080</span>;</span><br><span class="line">     server_name www.xieyezi.com;</span><br><span class="line"></span><br><span class="line">     #charset koi8-r;</span><br><span class="line">     #access_log  logs/host.access.log  main;</span><br><span class="line">     location / &#123;</span><br><span class="line">         root   html/vuemusic;</span><br><span class="line">         index  index.html index.htm;</span><br><span class="line">     &#125;</span><br><span class="line"></span><br><span class="line">    #设置代理转发</span><br><span class="line">     location /api/ &#123;</span><br><span class="line">       proxy_pass  http:<span class="comment">//localhost:3000/;</span></span><br><span class="line">     &#125;</span><br><span class="line">     #error_page  404              /404.html;</span><br><span class="line"></span><br><span class="line">     # redirect server error pages to the static page /50x.html</span><br><span class="line">     #</span><br><span class="line">     error_page   <span class="number">500</span> <span class="number">502</span> <span class="number">503</span> <span class="number">504</span>  /<span class="number">50</span>x.html;</span><br><span class="line">     location = <span class="regexp">/50x.html &#123;</span></span><br><span class="line"><span class="regexp">         root   html;</span></span><br><span class="line"><span class="regexp">     &#125;</span></span><br><span class="line"><span class="regexp"></span></span><br><span class="line"><span class="regexp">     # proxy the PHP scripts to Apache listening on 127.0.0.1:80</span></span><br><span class="line"><span class="regexp">     #</span></span><br><span class="line"><span class="regexp">     #location ~ \.php$ &#123;</span></span><br><span class="line"><span class="regexp">     #    proxy_pass   http:/</span><span class="regexp">/127.0.0.1;</span></span><br><span class="line"><span class="regexp">     #&#125;</span></span><br><span class="line"><span class="regexp"></span></span><br><span class="line"><span class="regexp">     # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000</span></span><br><span class="line"><span class="regexp">     #</span></span><br><span class="line"><span class="regexp">     #location ~ \.php$ &#123;</span></span><br><span class="line"><span class="regexp">     #    root           html;</span></span><br><span class="line"><span class="regexp">     #    fastcgi_pass   127.0.0.1:9000;</span></span><br><span class="line"><span class="regexp">     #    fastcgi_index  index.php;</span></span><br><span class="line"><span class="regexp">     #    fastcgi_param  SCRIPT_FILENAME  /</span>scripts$fastcgi_script_name;</span><br><span class="line">     #    include        fastcgi_params;</span><br><span class="line">     #&#125;</span><br><span class="line"></span><br><span class="line">     # deny access to .htaccess files, if Apache's document root</span><br><span class="line">     # concurs with nginx's one</span><br><span class="line">     #</span><br><span class="line">     #location ~ /\.ht &#123;</span><br><span class="line">     #    deny  all;</span><br><span class="line">     #&#125;</span><br><span class="line"> &#125;</span><br></pre></td></tr></table></figure></p>
<p>   在上面的代码中,将<code>server_name</code>设置为你的域名,root设置为你的项目根目录.因为我将vumusic拷贝至html下面了,所以这样设置:<code>html/vuemusic;</code><br>   在上面代码中,哪里实现了代理转发呢？</p>
   <figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">#设置代理转发</span><br><span class="line">location /api/ &#123;</span><br><span class="line">  proxy_pass  http://localhost:3000/;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>   意思就是说,在当前这个项目下,所有的<code>/api/</code>的请求,都会被代理至<code>http://localhost:3000/</code>下面.<br>   在nginx根目录下打开命令行窗口输入:<br>   <figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">nginx -s reload</span><br></pre></td></tr></table></figure></p>
<p>   重新访问项目,就会发现,跨域问题成功解决.</p>
  	
					
	  </div>     
	  

	
<div class="post-meta">
      	

      
        <i class="iconfont icon-tag"></i>     
          <a class="tag-link" href="/tags/JS/">JS</a> <a class="tag-link" href="/tags/Vue/">Vue</a>    
      	
</div>





<div class="post-footer">
  <div class="pf-left">
      <img class="pf-avatar" src="http://wx2.sinaimg.cn/mw690/89296167gy1fu5ph67x17j21kw1kwhdu.jpg">
      <p class="pf-des">hi,我是写夜子,希望你有愉快的一天.</p>
  </div>

  <div class="pf-right">           
      <div class="pf-links">
        




<span class="donate-btn">
	<span class="iconfont icon-donate"></span>
</span>


<div id="donate-box" class="sildeUpMin">

	<span class="donate-cancel iconfont icon-cancel"></span>

	<div class="donate-img-box">
		<img id="donate-qr-wechat" class="noLazyLoad donate-img" src="/images/donate1.png" alt="No Donate Image!">	
		<img id="donate-qr-alipay" class="noLazyLoad donate-img" src="/images/donate2.png" alt="No Donate Image!">	
	</div>

	<span class="donate-word">世界美好 你也是</span>

	<div class="donate-list">
		<span class="iconfont icon-donate-wechat"></span>
		<span class="iconfont icon-donate-alipay"></span>
	</div>

</div>

 
        
	
<script id="-mob-share" src="http://f1.webshare.mob.com/code/mob-share.js?appkey=21d601593a1de"></script>
	
	<span class="share-btn">
	<span class="iconfont icon-share"></span>
	</span>


	<div class="-mob-share sildeUpMin">
		   			             
            <a class="iconfont  icon-share-qq -mob-share-qq"></a>		
     	   			             
            <a class="iconfont  icon-share-weixin -mob-share-weixin"></a>		
     	   			             
            <a class="iconfont  icon-share-weibo -mob-share-weibo"></a>		
     	   			             
            <a class="iconfont  icon-share-douban -mob-share-douban"></a>		
     	   			             
            <a class="iconfont  icon-share-facebook -mob-share-facebook"></a>		
     	   			             
            <a class="iconfont  icon-share-twitter -mob-share-twitter"></a>		
     	   			             
            <a class="iconfont  icon-share-google -mob-share-google"></a>		
     	   
	</div>	

      </div>  
    <nav class="pf-paginator">
      
         
          <a href="/2018/11/06/nginx给tomcat配置反向代理/" data-hover="nginx给tomcat配置反向代理">上一篇</a>      
            
        
      
        
        <a href="/2018/10/26/Es6的学习笔记2/" data-hover="Es6的学习笔记2"> 下一篇</a>
            
  </nav>   
  </div>
</div> 
	
	
</article>

          </section> 
      </div>            
    
    <a id="backTop">
      <span>
        <i class="iconfont icon-backtotop"></i>
      </span>
    </a> 

  
    
    <div class="search-container sildeUpMin">
        <div class="search-header">
            <input type="text" placeholder="输入你想搜索的" id="search-input" class="search-input">  
            <span class="search-cancel iconfont icon-cancel"></span>
        </div>
        <div id="search-result" class="search-result"></div>
    </div>
 
     <div class="mobile-menu">      

      
      <img class="mobile-menu-icon" src="/images/favicon.png">   
      

         
            

            <a class="mobile-menu-link" href="/">首页
            </a>
            
         
            

            <a class="mobile-menu-link" href="/archives">归档
            </a>
            
         
            

            <a class="mobile-menu-link" href="/tags">标签
            </a>
            
         
            

            <a class="mobile-menu-link" href="/about">关于
            </a>
            
         
                          

            <a class="mobile-menu-link mobile-menu-search" href="#">搜索 </a>                 
            
         
      
</div>        
    


<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?636802045446222199ae541e32c8133e"; 
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>





     
    




<footer id="footer">


		<div class="footer-copyright">
		&copy;
		
		2018-
		
		2020

		Xieyezi
		<br>

		Copyright
		<a href="https://github.com/xieyezi" target="_blank">Xieyezi</a>
		</div>

</footer>
   

  

    <script src="/nayo.bundle.js"></script>           
  </body>        
</html>